0
123
ViewsJavascript exercise "make all the values adjustable by the user"
I have this beginner Javascript coding challenge where I have to generate random characters and the user chooses the width, height and the "random" is the number of times that the random character appears in the loop as I understood.
make all values adjustable by the user
I know this solution is very simple, but I cant seem to reach it. This is my code so far:
<script type="text/javascript">
let width = prompt("Choose a Width value");
let height = prompt ("Choose a height value");
let random = prompt ("Choose a random value");
let string = "";
for(let i = 0; i < height; i++) {
for(j = 0; j < width; j++) {
string += "#";
}
string += "<br>";
}
const characters = '*';
function generateRandomCode(){
let result = ""
let charactersLength = characters.length;
for (let i = 0; i < random ; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result
}
document.write(string);
</script>
Does anyone know how to generate these random characters and make the user choose the number of times that it does? Thank you <3
·
Juan Pablo Isaza
1 answers
Answer question0
Strings are immutable. It might be easier with a 2d array.
document.getElementById("calc").onclick = () => {
const width = document.getElementById("width").value;
const height = document.getElementById("height").value;
const random = document.getElementById("random").value;
// Create the 2d array, filled with '#'
var arr = Array.from({length: height}, () => Array.from({length: width}, () => '#'));
// Replace in array at random indexes
let replaced = 0;
while (replaced < random) {
const x = Math.floor(Math.random() * height);
const y = Math.floor(Math.random() * width);
if (arr[x][y] !== '*') {
arr[x][y] = '*';
replaced += 1;
}
}
// Convert to string
let result = arr.join('<br/>').replaceAll(',','');
// Display result
document.getElementById("result").innerHTML = `<pre>${result}</pre>`;
};<div>
<label for="width">Width:</label>
<input type="number" id="width" value="5" />
</div>
<div>
<label for="height">Height:</label>
<input type="number" id="height" value="5" />
</div>
<div>
<label for="random">Random:</label>
<input type="number" id="random" value="5" />
</div>
<div>
<button id="calc">Go</button>
</div>
<div id="result">
·
Juan Pablo Isaza
Report
Answer question